<template>
    <div>
        编号: <input type="text" v-model="id">
        产品名称: <input type="text"  v-model="name"><br>
        产品图片地址: <input type="text"  v-model="pic">
        价格: <input type="text"  v-model="price">
        <button @click="add">添加</button>
    </div>


</template>
<script>

    export default{
        props:['ppp','checks','checkd'],
        data () {
            return {
                id:'',
                name:'',
                pic:'',
                price:''
            }
        },
        methods: {
            add(){
                this.ppp.push({
                    id:this.id,
                    name:this.name,
                    price:this.price,
                    pic:this.pic,
                    _id:Math.random(),
                    num:"1"
                })

                localStorage.setItem('yyy',JSON.stringify(this.ppp))
                
            }
        }
    }
    

</script>

<style scoped>
    *{
        margin: 0;
        padding: 0;
    }
    #app div{
        width: 600px;
        border: 1px solid;
        margin-top: 10px;
        padding: 10px;
    }
    table tr:nth-child(1){
        background-color: aqua;
        
    }
    table tr:nth-child(1) td{
        height: 20px;
        line-height: 20px;
        padding: 0 10px;
        text-align: center;
        /* width: 100px; */
        color: white;
        border: 1px solid black;
    }
    img{
        width: 40px;
        height: 40px;
        border: 0;
    }
    .tu{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    td{
        height: 60px;
        line-height: 60px;
        padding: 0 10px;
        text-align: center;
        color: black;
        border: 1px solid;
    }
    table{
        border-collapse: collapse;
        position: relative;
    }
    .last{
        display: none;
    }
    .last2{
        height: 30px;
        line-height: 30px;
        text-align: center;
    }
</style>